<template>
  <view class="navigation-page">
    <!-- 地图容器 -->
    <view class="map-container" id="mapContainer">
      <!-- 地图标记点 -->
      <map 
        :latitude="destination.latitude" 
        :longitude="destination.longitude"
        :markers="markers"
        :scale="16"
        show-location="true"
        class="map"
      ></map>
    </view>
    
    <!-- 底部信息面板 -->
    <view class="bottom-panel">
      <view class="destination-info">
        <view class="destination-name">{{destination.name}}</view>
        <view class="destination-address">{{destination.address}}</view>
      </view>
      <view class="navigation-btn" @click="startNavigation">
        <image src="@/img/车联网服务-03车辆维修-03门店详情_slices/plane@3x.png" class="nav-icon"></image>
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader';
// #endif

// #ifdef MP-WEIXIN
import amap from '@/common/amap-wx.js';
// #endif

export default {
  data() {
    return {
      destination: {
        name: "伟业汽车维修厂(人民路店)",
        address: "山阳区人民中路32号",
        latitude: 35.2478,
        longitude: 113.2145
      },
      markers: [{
        id: 1,
        latitude: 35.2478,
        longitude: 113.2145,
        title: "伟业汽车维修厂(人民路店)",
        iconPath: '/static/marker.png',
        width: 30,
        height: 30
      }],
      map: null,
      amapKey: '8477719e461b7195529912991c106c9a'
    }
  },
  
  onLoad(options) {
    // 设置页面标题
    uni.setNavigationBarTitle({
      title: '导航'
    });
    
    // 接收传递的目的地信息
    if (options.destinationData) {
      try {
        const destinationData = JSON.parse(decodeURIComponent(options.destinationData));
        this.destination = { ...this.destination, ...destinationData };
        
        // 更新地图标记
        this.markers = [{
          id: 1,
          latitude: this.destination.latitude,
          longitude: this.destination.longitude,
          title: this.destination.name,
          iconPath: '/static/marker.png',
          width: 30,
          height: 30
        }];
      } catch (e) {
        console.error('解析目的地数据失败：', e);
      }
    }
    
    // 初始化地图
    this.initMap();
  },
  
  methods: {
    // 初始化地图
    initMap() {
      // #ifdef H5
      AMapLoader.load({
        key: this.amapKey,
        version: '2.0',
        plugins: ['AMap.Marker', 'AMap.Geolocation', 'AMap.Driving']
      }).then((AMap) => {
        this.map = new AMap.Map('mapContainer', {
          zoom: 16,
          center: [this.destination.longitude, this.destination.latitude]
        });
        
        // 添加目的地标记
        const marker = new AMap.Marker({
          position: [this.destination.longitude, this.destination.latitude],
          title: this.destination.name,
          label: {
            content: this.destination.name,
            offset: new AMap.Pixel(0, 30)
          }
        });
        marker.setMap(this.map);
        
        // 获取当前位置并规划路线
        this.map.plugin('AMap.Geolocation', () => {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,
            timeout: 10000
          });
          this.map.addControl(geolocation);
          
          geolocation.getCurrentPosition((status, result) => {
            if (status === 'complete') {
              this.planRoute(result.position, [this.destination.longitude, this.destination.latitude]);
            }
          });
        });
      }).catch(e => {
        console.error('H5地图加载失败:', e);
      });
      // #endif
      
      // #ifdef MP-WEIXIN
      // 微信小程序端地图初始化
      const amapPlugin = new amap.AMapWX({ key: this.amapKey });
      
      amapPlugin.getRegeo({
        success: (data) => {
          const startPoint = [data[0].longitude, data[0].latitude];
          const endPoint = [this.destination.longitude, this.destination.latitude];
          this.planRoute(startPoint, endPoint);
        },
        fail: (err) => {
          console.error('小程序定位失败:', err);
        }
      });
      // #endif
    },
    
    // 规划路线
    planRoute(startPoint, endPoint) {
      // #ifdef H5
      if (this.map) {
        this.map.plugin('AMap.Driving', () => {
          const driving = new AMap.Driving({
            map: this.map,
            policy: AMap.DrivingPolicy.LEAST_TIME
          });
          
          driving.search(startPoint, endPoint, (status, result) => {
            if (status === 'complete') {
              console.log('路线规划成功');
            } else {
              console.error('路线规划失败:', result);
            }
          });
        });
      }
      // #endif
    },
    
    // 开始导航
    startNavigation() {
      // 使用系统导航
      uni.openLocation({
        latitude: this.destination.latitude,
        longitude: this.destination.longitude,
        name: this.destination.name,
        address: this.destination.address,
        success: () => {
          console.log('打开导航成功');
        },
        fail: (err) => {
          console.error('打开导航失败：', err);
          uni.showToast({
            title: '打开导航失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.navigation-page {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* 地图容器 */
.map-container {
  width: 100%;
  height: calc(100vh - 200rpx);
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

/* 底部信息面板 */
.bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 30rpx;
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.destination-info {
  flex: 1;
  margin-right: 30rpx;
}

.destination-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.3;
}

.destination-address {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

.navigation-btn {
  width: 120rpx;
  height: 120rpx;
  background-color: #4CAF50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
  cursor: pointer;
}

.nav-icon {
  width: 50rpx;
  height: 50rpx;
  filter: brightness(0) invert(1); /* 将图标变为白色 */
}
</style>
